<template>
	<view class="content">
		<view class="logo-container">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
		</view>
		<form action="" class="form" @submit="loginsubmit">
			<view class="uni-form-item uni-column">
				<input class="uni-input" name="userMobile" v-model="userMobile" maxlength="16" placeholder="请输入用户名" />
			</view>
			<view class="uni-form-item uni-column">
				<input class="uni-input" name="userPassword" type="password" maxlength="15" v-model="userPassword" placeholder="请输入密码" />
			</view>

			<view class="addr">
				<view></view>
				<view><text class="forget-password" @click="clickLink('forget')">忘记密码?</text></view>
			</view>
			<view class="uni-btn-v">
				<button form-type="submit" class="submit">登录</button>
			</view>
			<view class="register-container">
				<text>还没有账号？</text>
				<text class="register-link" @click="clickLink('register')">立即注册</text>
			</view>
			<view class="copyright">
				<text>@ 非遗文化传承系统</text>
			</view>
		</form>
	</view>
</template>

<script>
	// 引入API
	import {_config} from '@/config'
	import { login } from '@/api/teacher.js';
	
	export default {
		data() {
			return {
				userMobile:'',
				userPassword: '',
				back: false,
			}
		},
		watch: {
			
		},
		onLoad(option){
			if (typeof option.back != 'undefined') {
				this.back = true;
			}
		},
		onBackPress(option) {
			if (option.from == 'backbutton' && !this.back) {
				uni.switchTab({
					url:'../index/index'
				})
				return true;
			}
		},
		methods: {
			loginsubmit(data) {
				if (!this.userMobile) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none',
					});
					return;
				}
				if (!this.userPassword) {
					uni.showToast({
						title: '请输入登录密码',
						icon: 'none',
					});
					return;
				}
				
				uni.showLoading({
					title: '登录中...'
				});
				
				let loginData = data.detail.value;
				login(loginData).then(res => {
					uni.hideLoading();
					if (res.data.code == 0) {
						let data = res.data.data;
						uni.setStorageSync("token", data.Token);
						uni.setStorageSync("teacherdataid", data.TeacherDataID);
						uni.setStorageSync("teachername", data.TeacherName);
						uni.setStorageSync("usermobile", data.UserMobile);
						
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						setTimeout(() => {
							uni.switchTab({
								url: '../index/index'
							});
						}, 1500);
					} else {
						uni.showToast({
							title: res.data.msg || '登录失败',
							icon: 'none',
						});
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					});
				});
			},
			clickLink(link){
				let url = './' + link;
				uni.navigateTo({
					url: url
				});
			},
			
		}
	}
</script>

<style>
page {
	width: 100%;
	height: 100%;
	background-color: #f8f8f8;
}

.content {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 40rpx;
	box-sizing: border-box;
}

.logo-container {
	margin-bottom: 60rpx;
}

.logo {
	width: 200rpx;
	height: 200rpx;
}

.form {
	width: 100%;
	background-color: #ffffff;
	padding: 40rpx;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.uni-input {
	height: 100rpx;
	border-bottom: 1px solid #eee;
	margin: 20rpx 0;
	font-size: 32rpx;
	padding: 0 20rpx;
}

.uni-btn-v {
	margin: 40rpx 0;
}

.submit {
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	background: linear-gradient(to right, #60A0D4, #4A90E2);
	color: #FFFFFF;
	border-radius: 45rpx;
}

.addr {
	display: flex;
	justify-content: flex-end;
	margin: 20rpx 0;
}

.forget-password {
	color: #60A0D4;
	font-size: 28rpx;
}

.register-container {
	text-align: center;
	margin-top: 30rpx;
	font-size: 28rpx;
	color: #666;
}

.register-link {
	color: #60A0D4;
	margin-left: 10rpx;
}

.copyright {
	position: fixed;
	bottom: 40rpx;
	width: 100%;
	text-align: center;
	font-size: 24rpx;
	color: #999;
}
</style>
